{include file="public/header"}

<style scoped>
    .el-select-dropdown {
      padding: 0;
    }
    </style>
     {include file="public/style"}
    <el-breadcrumb separator="/">
        <el-breadcrumb-item>首页</el-breadcrumb-item>
        <el-breadcrumb-item>产品管理</el-breadcrumb-item>
        <el-breadcrumb-item>属性列表</el-breadcrumb-item>
    </el-breadcrumb>
    <br>
        <el-card >
            <div style="display: flex;align-items: center;justify-content: flex-start;">
                <el-form :inline="true" :model="searchForm" size="small"  ref="refsearchForm">                
                    <el-form-item label="属性名称">                     
                        <el-input v-model="searchForm.name" placeholder="请输入属性名称" clearable filterable></el-input>
                    </el-form-item>                 
                    <el-form-item label="子叶类目">
                          <el-select v-model="searchForm.catepubid" filterable clearable placeholder="请选择子叶类目"> 
                               <el-option    v-for="item in options" :key="item.catepubid" :label="item.pubnameCn"  :value="item.catepubid">    </el-option>                             
                           </el-select>                 
                    </el-form-item> 
                    <el-form-item>
                        <el-button type="primary"  size="small" plain @click="getSearch" icon="el-icon-search" v-cloak>查询</el-button>
                    </el-form-item>          
                  </el-form>               
              
            </div>

            <el-table :data="tablelist"    :span-method="objectSpanMethod"    style="width: 100%;margin-bottom: 20px;"  row-key="id"  border   ref="table">
                <el-table-column   prop="pubnameCn" label="类目" width="80"> </el-table-column>
                <el-table-column   prop="lineAttrnameCn" label="属性中文名称" width="100"> </el-table-column>  
                <el-table-column   prop="lineAttrname" label="属性英文名称" width="100"> </el-table-column>   
                <el-table-column   prop="values" label="属性值"> </el-table-column>   
               
            </el-table>

            <!-- page -->            
            <el-pagination @size-change="handleSizeChange" @current-change="handleCurrentChange" :current-page="searchForm.pagenum" :page-sizes="[20,50,100, 150, 300,500,1000,2000]"
                :page-size="searchForm.pagesize" layout="total, sizes, prev, pager, next, jumper" :total="total">
            </el-pagination>  
        </el-card>        
       

</div>

    <script>
        new Vue({
            el: '#app',
            data: function () {
                return {                           
                    searchForm:{   
                        lineAttrnameCn:'',    
                      
                        catepubid:'',    
                        pagesize:20,
                        pagenum:1, 
                    } , //搜索条件                                
                   options:[], //类目列表
                    total:0,   //分页总页数      
                    tablelist:[] ,              
                    spanArr: [],//合并单元格
                    testPosition1:[]                    
                }
            },
            mounted(){        
                this.getSearch()
                this.getCateList()
            },
            methods: {        

                async getDatalist() {
                      
                    const res = await axios.post('/admin/products/attribute', {params: this.searchForm})                    
                    if (res.status !== 1) {
                        return this.$message.error(res.info);
                    }
                    this.testPosition1 = []
                    this.$nextTick(()=>{
                        this.rowspan(this.spanArr, this.testPosition1, 'pubnameCn');
                    })                 

                    this.total = res.info.total
                    this.tablelist = res.info.list

                },
                    
                handleSizeChange(newSize) {
                    this.searchForm.pagesize = newSize
                    this.getDatalist()
                },
                handleCurrentChange(newPage) {
                    this.searchForm.pagenum = newPage
                    this.getDatalist()
                },
                handleSelectionChange(val) {
                    this.multipleSelection = val;
                },     
                getSearch() {
                    this.searchForm.pagenum = 1
                    this.getDatalist()
                },
            
                rowspan(spanArr, position, spanName) {
                    this.tablelist.forEach((item, index) => {
                    if (index === 0) {
                        spanArr.push(1);
                        position = 0;
                    } else{
                        if (
                        this.tablelist[index][spanName] ===
                        this.tablelist[index - 1][spanName]
                        ) {
                            spanArr[position] += 1;
                            spanArr.push(0);
                        } else {
                            spanArr.push(1);
                            position = index;
                        }
                    }
                    });
                },

                //合并单元格
                objectSpanMethod({ row, column, rowIndex, columnIndex }) {
                    console.log(this.spanArr);
                    if (columnIndex === 0) {
                        const _row = this.spanArr[rowIndex];
                        const _col = _row > 0 ? 1 : 0;
                        return {
                            rowspan: _row,
                            colspan: _col,
                        };
                    }
                },
                //获取类目列表
               async  getCateList(){
                   let loading = this.$loading({
                        lock: true,
                        text: '数据加载···',
                        spinner: 'el-icon-loading',
                        background: 'rgba(0, 0, 0, 0.7)'
                    });   
                  const res = await axios.post('/admin/products/product_list',{type:3})     
                   loading.close();
                   if (res.status !== 1) {
                      return  this.$message.error(res.info);             
                   }
                   this.options = res.info;
                }
                
            }
        })
    </script>
 </body> 
</html>
